<template>
	<div class="app-container">
		<div class="filter-container">
			<el-button class="filter-item" type="danger" size="small" @click="delPicture('all')" :disabled="checkedIds.length === 0">删除选中</el-button>
			<el-button class="filter-item" type="primary" size="small" @click="pictureOperate('add')">添加图片</el-button>
		</div>
		<el-table :data="list" border v-loading="loading" @selection-change="handleSelectionChange">
			<el-table-column align="center" type="selection" width="50">
			</el-table-column>
			<el-table-column prop="title" label="标题"></el-table-column>
			<el-table-column prop="image" align="center" width="150px" label="缩略图">
				<template slot-scope="scope">
					<el-popover placement="right" trigger="hover">
						<img :src="scope.row.image" style="max-height: 300px;max-width: 500px" />
						<img slot="reference" :src="scope.row.image" style="max-height: 30px;max-width: 130px" />
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column prop="create_date" align="center" label="发布日期" width="200"></el-table-column>
			<el-table-column label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="pictureOperate('edit', scope.row._id)">编辑</el-button>
					<el-button @click.native="delPicture('one', scope.row._id)" type="text" size="small" style="color: red;">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :limit.sync="limit" :page.sync="page" :total="Number(total)" @pagination="pagination" />
	</div>
</template>

<script>
	import Pagination from '@/components/Pagination'
	export default {
		components: {
			Pagination
		},
		data() {
			return {
				checkedIds: [], // 选中的图片的ID
				loading: false,
				page: 1,
				limit: 10,
				total: 0,
				list: [],
				formVisible: false,
				formLoading: false,
				operateName: '添加图片',
				operateType: 'add',
				picture: {}

			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				this.loading = true
				uniCloud.callFunction({
					name: 'getArticleList',
					data: {
						page: this.page,
						limit: this.limit
					}
				}).then(res => {
					this.loading = false
					this.total = res.result.total
					this.list = res.result.data
				}).catch(err => {
					console.log(err)
				})
			},
			handleSelectionChange(val) {
				this.checkIds = []
				val.forEach(item => {
					this.checkedIds.push(item._id)
				})
			},
			delPicture(type, id) {
				this.$confirm('此操作将删除选中的图片, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					uniCloud.callFunction({
						name: 'updateArticle',
						data: {
							id: type === 'one' ? id : this.checkedIds,
							delete_date: new Date().toLocaleDateString()
						}
					}).then(res => {
						this.$message({
							type: 'success',
							message: '删除成功',
							duration: 800,
							offset: 200,
							onClose: () => {
								this.getList()
							}
						})
					}).catch(() => {
						// 取消删除
					})
				})
			},
			pictureOperate(type, pictureId) {
				this.operateType = type
				if(type === 'add') {
					this.operateName = '添加图片'
					this.picture = {}
				} else if (type === 'edit') {
					this.operateName = '编辑文章'
					this.formLoading = true
				}
			},
			pagination(e) {
				if(e) {
					this.page = e.page
					this.limit = e.limit
				}
				this.getList()
			}
		}
	}
</script>

<style>
</style>
